Dette spørgsmåls svar er en indsats fra samfundet. Rediger eksisterende svar for at forbedre dette indlæg. Det accepterer i øjeblikket ikke nye svar eller interaktioner. Hvordan kan jeg omdirigere brugeren fra en side til en anden ved hjælp af jQuery eller ren JavaScript?
2020-12-07 21:59:03
1
2
Næste
Man omdirigerer ikke bare ved hjælp af jQuery
jQuery er ikke nødvendigt, og window.location.replace (...) simulerer bedst en HTTP-omdirigering.
window.location.replace (...) er bedre end at bruge window.location.href, fordi erstat () ikke holder den oprindelige side i sessionshistorikken, hvilket betyder, at brugeren ikke sidder fast i en uendelig back- knap fiasko.
Hvis du vil simulere nogen, der klikker på et link, skal du bruge
placering. href
Hvis du vil simulere en HTTP-omdirigering, skal du bruge location.replace
For eksempel:
// lignende adfærd som en HTTP-omdirigering
window.location.replace ("http://stackoverflow.com");
// lignende adfærd som at klikke på et link
window.location.href = "http://stackoverflow.com";
|
ADVARSEL: Dette svar er blot givet som en mulig løsning; det er naturligvis ikke den bedste løsning, da det kræver jQuery. I stedet foretrækker den rene JavaScript-løsning.
$ (placering) .attr ('href', 'http://stackoverflow.com')
|
Standard "vanilje" JavaScript-måde at omdirigere en side på
window.location.href = 'newPage.html';
Eller mere simpelt: (da vinduet er globalt)
location.href = 'newPage.html';
Hvis du er her, fordi du mister HTTP_REFERER, når du omdirigerer, skal du fortsætte med at læse:
(Ellers ignorere denne sidste del)
Det følgende afsnit er for dem, der bruger HTTP_REFERER som en af mange sikkerhedsforanstaltninger (selvom det ikke er en god beskyttelsesforanstaltning). Hvis du bruger Internet Explorer 8 eller lavere, går disse variabler tabt, når du bruger enhver form for JavaScript-sideomdirigering (location.href osv.).
Nedenfor skal vi implementere et alternativ til IE8 & lavere, så vi ikke mister HTTP_REFERER. Ellers kan du næsten altid blot bruge window.location.href.
Test mod HTTP_REFERER (URL-indsættelse, session osv.) Kan hjælpe med at fortælle, om en anmodning er legitim.
(Bemærk: der er også måder at omgå / spoofe disse henvisere på, som bemærket af droops link i kommentarerne)
Enkel løsning til testning på tværs af browsere (fallback til window.location.href til Internet Explorer 9+ og alle andre browsere)
Anvendelse: omdirigering ('anotherpage.aspx');
funktion omdirigering (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
version = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 og lavere
hvis (isIE && version <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (link);
link.click ();
}
// Alle andre browsere kan bruge standardvinduet.location.href (de mister ikke HTTP_REFERER som Internet Explorer 8 og lavere gør)
andet {
window.location.href = url;
}
}
|
Der er mange måder at gøre dette på.
// vindue.placering
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ sti'
// vindue.historie
window.history.back ()
window.history.go (-1)
// window.navigate; KUN for gamle versioner af Internet Explorer
window.navigate ('top.jsp')
// Sandsynligvis ingen bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (placering) .attr ('href', 'http: //www.example.com')
$ (vindue) .attr ('placering', 'http: //www.example.com')
$ (placering). prop ('href', 'http://www.example.com')
|
Dette fungerer for enhver browser:
window.location.href = 'din_url';
|
Det ville hjælpe, hvis du var lidt mere beskrivende i, hvad du prøver at gøre. Hvis du forsøger at generere side-data, er der nogle muligheder for, hvordan du gør dette. Du kan generere separate links til hver side, som du vil kunne komme direkte til.
1
2
3
...
Bemærk, at den aktuelle side i eksemplet håndteres forskelligt i koden og med CSS.
Hvis du ønsker, at de pagedata skal ændres via AJAX, er det her, jQuery ville komme ind. Hvad du ville gøre er at tilføje en klikhåndtering til hvert af ankermærkerne, der svarer til en anden side. Denne klikhåndterer vil påkalde nogle jQuery-koder, der går og henter den næste side via AJAX og opdaterer tabellen med de nye data. Eksemplet nedenfor forudsætter, at du har en webservice, der returnerer de nye sidedata.
$ (dokument). klar (funktion () {
$ ('a.pager-link'). klik på (funktion () {
var side = $ (denne) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
type: 'POST',
url: '/ path-to-service',
data: side,
succes: funktion (indhold) {
$ ('# myTable'). html (indhold); // erstatte
}
});
returner falsk; // for at stoppe linket
});
});
|
Jeg synes også, at location.replace (URL) er den bedste måde, men hvis du vil underrette søgemaskinerne om din omdirigering (de analyserer ikke JavaScript-kode for at se omdirigering), skal du tilføje rel = "canonical" meta tag til dit websted.
Tilføjelse af et noscript-afsnit med et HTML-opdatering-metatag er også en god løsning. Jeg foreslår, at du bruger dette JavaScript-omdirigeringsværktøj tiloprette omdirigeringer. Det har også Internet Explorer-understøttelse til at passere HTTP-henvisningen.
Prøvekode ser uden forsinkelse sådan ud:
|
Men hvis nogen vil omdirigere tilbage til startsiden, kan han bruge følgende uddrag.
window.location = window.location.host
Det ville være nyttigt, hvis du har tre forskellige miljøer som udvikling, iscenesættelse og produktion.
Du kan udforske dette vindue eller window.location-objekt ved blot at sætte disse ord i Chrome Console eller Firebugs Console.
|
JavaScript giver dig mange metoder til at hente og ændre den aktuelle URL, der vises i browserens adresselinje. Alle disse metoder bruger Location-objektet, som er en egenskab for Window-objektet. Du kan oprette et nyt placeringsobjekt, der har den aktuelle URL som følger.
var currentLocation = window.location;
Grundlæggende struktur for en URL
//:/
Protokol - Angiver det protokolnavn, der skal bruges til at få adgang til ressourcen på Internettet. (HTTP (uden SSL) eller HTTPS (med SSL))
værtsnavn - Værtsnavn angiver den vært, der ejer ressourcen. For eksempel www.stackoverflow.com. En server leverer tjenester ved hjælp af navnet på værten.
port - Et portnummer, der bruges til at genkende en bestemt proces, hvortil en internet- eller anden netværksmeddelelse skal videresendes, når den ankommer til en server.
stienavn - stien giver information om den specifikke ressource i den vært, som webklienten vil have adgang til. For eksempel stackoverflow.com/index.html.
forespørgsel - En forespørgselsstreng følger stykomponenten og giver en række oplysninger, som ressourcen kan bruge til et eller andet formål (for eksempel som parametre til en søgning eller som data, der skal behandles).
hash - Ankerdelen af en URL inkluderer hash-tegnet (#).
Med disse placeringsobjektegenskaber kan du få adgang til alle disse URL-komponenter
hash -Sætter eller returnerer ankerdelen af en URL.
vært-sæt
eller returnerer værtsnavnet og porten på en URL.
værtsnavn -Sæt eller
returnerer værtsnavnet på en URL.
href -Sætter eller returnerer hele
URL.
stienavn - Indstiller eller returnerer stienavnet på en URL.
port - Indstiller eller returnerer det portnummer, som serveren bruger til en URL.
protokol - Indstiller eller returnerer protokollen for en URL.
søg -Sæt
eller returnerer forespørgselsdelen af en URL
Nu Hvis du vil ændre en side eller omdirigere brugeren til en anden side, kan du bruge href-egenskaben for Location-objektet som dette
Du kan bruge href-egenskaben for Location-objektet.
window.location.href = "http://www.stackoverflow.com";
Placeringsobjekt har også disse tre metoder
tildel () - Indlæser et nyt dokument.
reload () - Genindlæser det aktuelle dokument.
erstatte () - Erstatter det aktuelle dokument med et nyt
Du kan bruge tildele () og erstatte metoder også til at omdirigere til andre sider som disse
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Hvordan tildeler () og erstat () adskiller sig - Forskellen mellem erstat () metode og tildel () metode () er, at erstat () fjerner URL'en til det aktuelle dokument fra dokumenthistorikken, betyder at det ikke er muligt at knappen "tilbage" for at navigere tilbage til det originale dokument. Så brug metoden alloc (), hvis du vil indlæse et nyt dokument, og vil give mulighed for at navigere tilbage til det originale dokument.
Du kan ændre placeringsobjektets href-egenskab ved hjælp af jQuery også sådan
$ (placering) .attr ('href', url);
Og derfor kan du omdirigere brugeren til en anden url.
|
Dybest set er jQuery bare en JavaScript-ramme, og til at gøre nogle af tingene som omdirigering i dette tilfælde kan du bare bruge ren JavaScript, så i så fald har du 3 muligheder ved at bruge vaniljeJavaScript:
1) Brug af placeringserstatning, dette erstatter den aktuelle historik for siden, hvilket betyder, at det ikke er muligt at bruge tilbage-knappen til at gå tilbage til den oprindelige side.
window.location.replace ("http://stackoverflow.com");
2) Ved hjælp af placeringstildeling bevares historikken for dig, og ved at bruge tilbage-knappen kan du gå tilbage til den originale side:
window.location.assign ("http://stackoverflow.com");
3) Jeg anbefaler at bruge en af disse tidligere måder, men dette kan være den tredje mulighed ved hjælp af ren JavaScript:
window.location.href = "http://stackoverflow.com";
Du kan også skrive en funktion i jQuery for at håndtere den, men anbefales ikke, da det kun er en linjers ren JavaScript-funktion, og du kan også bruge alle ovennævnte funktioner uden vindue, hvis du allerede er i vinduesområdet, for eksempel window.location.replace ("http://stackoverflow.com"); kunne være location.replace ("http://stackoverflow.com");
Også viser jeg dem alle på billedet nedenfor:
|
Skal bare være i stand til at indstille ved hjælp af window.location.
Eksempel:
window.location = "https://stackoverflow.com/";
Her er et tidligere indlæg om emnet: Hvordan omdirigerer jeg til en anden webside?
|
Før jeg begynder, er jQuery et JavaScript-bibliotek, der bruges til DOM-manipulation. Så du bør ikke bruge jQuery til en sideomdirigering.
Et tilbud fra Jquery.com:
Mens jQuery muligvis kører uden større problemer i ældre browserversioner,
Vi tester ikke aktivt jQuery i dem og retter normalt ikke fejl
der kan vises i dem.
Det blev fundet her:
https://jquery.com/browser-support/
Så jQuery er ikke en end-all and be-all-løsning til bagudkompatibilitet.
Den følgende løsning ved hjælp af rå JavaScript fungerer i alle browsere og har været standard i lang tid, så du ikke har brug for nogen biblioteker til understøttelse af browsere.
Denne side omdirigeres til Google efter 3000 millisekunder
eksempel
Du vil snart blive omdirigeret til google.